<template>
  <div>
    <el-button  class="publish-notice" type="success" @click="publishNotice">新增运动</el-button>
    <el-table border :data="list" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="name" label="运动名">
        </el-table-column>
        <el-table-column prop="m" label="最小幅度监测值">
        </el-table-column>
        <el-table-column prop="n" label="最大幅度监测值">
        </el-table-column>
        <el-table-column prop="p" label="最小间隔监测值">
        </el-table-column>
        <el-table-column prop="q" label="最大间隔监测值">
        </el-table-column>    
        <el-table-column prop="money" label="金币收益/cal">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
        </template>
        </el-table-column>
    </el-table>
   
    <common-modal v-show="is_show" v-on:closeme="close" v-on:confirm="confirm">
            <h3 slot="header-title">编辑{{tmp.name}}运动</h3>
            <div slot="body" style="margin-top:2%;">
                最小幅度监测值：<el-input type="number" v-model="tmp.m" placeholder="请输入最小幅度监测值"></el-input>
            </div>
            <div slot="body" style="margin-top:2%;">
                最大幅度监测值：<el-input type="number" v-model="tmp.n" placeholder="请输入最大幅度监测值"></el-input>
            </div>
            <div slot="body" style="margin-top:2%;">
                最小幅度监测值：<el-input type="number" v-model="tmp.p" placeholder="最小幅度监测值"></el-input>
            </div>  
            <div slot="body" style="margin-top:2%;">
                最大幅度监测值：<el-input type="number" v-model="tmp.q" placeholder="最大幅度监测值"></el-input>
            </div>  

            <div slot="body" style="margin-top:2%;">
                金币收益/cal：<el-input type="number" v-model="tmp.money" placeholder="请输入每卡路里消耗的金币收益"></el-input>
            </div>        
    </common-modal>
  </div>
</template>

<script>
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              list:[
                  {
                      "name":"跳绳",
                      "m":"10",
                      "n":"40",
                      "p":"380",
                      "q":"640",
                      "money":1
                  },
                  {
                      "name":"跑步",
                      "m":"11",
                      "n":"30",
                      "p":"560",
                      "q":"900",
                      "money":1
                  },
                  {
                      "name":"仰卧起坐",
                      "m":"11",
                      "n":"20",
                      "p":"1200",
                      "q":"6000",
                      "money":1
                  }
              ],
              cur_edit_sport_name:"",
              cur_edit_sport_id:"",
              money_per_count:"",
              energy_per_count:"",
              is_show:false,
              tmp:{
                "name":"跑步",
                "m":"11",
                "n":"30",
                "p":"560",
                "q":"900",
                "money":1                 
              }
          }
      },
      mounted:function(){
          //this.getParameters()
      },
      methods:{
          edit(row){
            //   this.cur_edit_sport_id=row._id
            //   this.cur_edit_sport_name=row.name
            //   this.money_per_count=row.money_per_count
            //   this.energy_per_count=row.energy_per_count
              this.is_show=true;
          },
          getParameters(){
            this.$ajax({
                method: 'get',
                url: 'get_sport_parameters',

            }).
            then(res => {
                this.list=res.data.res_msg

            });               
          },
          close(){
              this.is_show=false;
          },

          confirm(){
              //这里调接口
              this.is_show=false;
              let msg={
                  "_id":this.cur_edit_sport_id,
                  "money_per_count":this.money_per_count,
                  "energy_per_count":this.energy_per_count
              }
                console.log(msg)
              if(this.money_per_count<0||this.energy_per_count<0){
                  this.$message.error("值不能为负");
                  return
              }

            this.$ajax({
                method: 'post',
                url: 'update_sport_parameter',
                data: msg
            }).
            then(res => {
                this.getParameters()
                this.$message.success("编辑成功！");
                
            });                
              
          },
      },
  }
</script>


<style lang="scss" scoped>
    .publish-notice{
        margin: 0 0 2% 0 ;
    }
    .page{
        margin-top: 1%;
        margin-left: 75%;
        margin-left: 80%;
    }
</style>
